<template>
	<view class="shopcart">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<!-- 顶部背景样式 -->
		<view class="header">
			<view class="slogan">
				<u-icon name="checkmark-circle" color="#fff"></u-icon>
				<text class="txt">100%正品保证</text>
			</view>
			<view class="slogan">
				<u-icon name="checkmark-circle" color="#fff"></u-icon>
				<text class="txt">所有商品精挑细选</text>
			</view>
			<view class="slogan">
				<u-icon name="checkmark-circle" color="#fff"></u-icon>
				<text class="txt">售后无忧</text>
			</view>
		</view>

		<!-- 购物车商品展示 -->
		<view class="goods">
			<view class="caozuo">
				<view>购物数量:{{ shopList.length }}</view>
				<view class="manage_btn" @click="manage" v-if="guanli">
					管理
				</view>
				<view class="manage_btn" @click="manage" v-if="!guanli">
					取消
				</view>
			</view>
			<view class="empty" v-if="!shopList.length">
				<u-empty
					text="暂无商品 去添加点什么吧"
					mode="car"
					icon="http://cdn.uviewui.com/uview/empty/car.png"
				></u-empty>
			</view>
			<!-- 热门推荐 -->
			<view class="hr" v-if="!shopList.length">
				<view class="left">————</view>
				<view class="middle">
					<text class="middle_text">热门推荐</text>
				</view>
				<view class="right">————</view>
			</view>
			<view class="hot_goods" v-if="!shopList.length">
				<view
					v-for="(item, index) in hotGoodsList"
					:key="index"
					class="hot_goods_content"
					@click="toDetails(item.id)"
					style="cursor: pointer;"
				>
					<image :src="item.image" mode=""></image>
					<text class="storeName">{{ item.storeName }}</text>
					<text class="price">￥{{ item.price }}</text>
				</view>
			</view>

			<view
				class="goods_shop"
				v-for="(item, index) in shopList"
				:key="index"
				v-if="shopList.length"
			>
				<view class="shop_img">
					<u-checkbox-group>
						<u-checkbox
							:ids="item.id"
							shape="circle"
							@change="changeState(item.id)"
						></u-checkbox>
					</u-checkbox-group>
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop_name">
					<view class="shop_info">
						<text>{{ item.storeName }}</text>
						<text>属性:{{ item.suk }}</text>
					</view>
					<view class="shop_price_num">
						<text class="shop_price" v-model="price">
							{{ item.price }}
						</text>
						<u-number-box
							buttonSize="25px"
							v-model="value"
							@change="valChange"
							integer
						></u-number-box>
					</view>
				</view>
			</view>
		</view>

		<view class="footer" v-if="shopList.length">
			<u-checkbox-group>
				<u-checkbox
					label="全选"
					shape="circle"
					:checked="isAllChecked"
					@change="allChoose"
				></u-checkbox>
			</u-checkbox-group>
			<view v-if="xiadan" class="asss">
				<text class="total">￥{{ total }}</text>
				<u-button
					text="立即下单"
					shape="circle"
					type="error"
					class="pay_btn"
					color="red"
					@click="nav"
				></u-button>
			</view>
			<view class="delete" v-if="shoucang">
				<u-button
					type="error"
					shape="circle"
					:plain="true"
					text="收藏"
					class="shoucang_btn"
					@click="shopCollect"
				></u-button>
				<u-button
					type="primary"
					shape="circle"
					:plain="true"
					text="删除"
					class="del"
					@click="deleteShop"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import {hotRecommend} from "@/network/index.js";
import colorGradient from "uview-ui/libs/function/colorGradient";
import {
	getShopCartPag,
	delShop,
	collectShop,
	shopNum
} from "../../network/shoppingCart.js";
import Nav from "@/components/top_nav.vue";
export default {
	data() {
		return {
			value: 1, //计数器默认值
			shopList: [], //购物车列表
			price: "", //单价
			isAllChecked: false, //全选
			shoucang: false,
			xiadan: true,
			ids: [], //商品id
			guanli: true,
			hotGoodsList: []
		};
	},
	components: {
		Nav
	},
	methods: {
		// 跳转商品详情
		toDetails(id) {
			uni.navigateTo({
				url: "../../subpackages/classify/ProductDetails?id=" + id
			});
		},
		// 获取热门推荐
		async getHotRecommend() {
			try {
				const res = await hotRecommend();
				this.hotGoodsList = res.data.list;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		//全选
		allChoose() {
			this.isAllChecked = !this.isAllChecked;
			this.shopList.map(item => (item.checked = this.isAllChecked));
		},
		//支付跳转
		nav() {
			uni.navigateTo({
				url: "../../subpackages/shoppingCart/dispatching"
			});
		},

		//管理
		manage() {
			(this.shoucang = !this.shoucang),
				(this.xiadan = !this.xiadan),
				(this.guanli = !this.guanli);
		},
		//获取购物车数据
		async toshop() {
			let res = await getShopCartPag();
			if (res.data.list.length) {
				this.shopList = res.data.list;
				for (let i = 0; i < this.shopList.length; i++) {
					this.price = res.data.list[i].price;
					this.value = res.data.list[i].cartNum;
				}
				console.log(res);
			}
		},

		//删除数据
		async deleteShop() {
			console.log(this.ids);
			let res = await delShop(this.ids);
			this.toshop();
			console.log(res);
		},
		changeState(name) {
			this.ids = name;
			console.log(name);
		},
		//收藏数据
		async shopCollect() {
			console.log(this.ids);
			let res = await collectShop({
				category: "product",
				id: [this.ids]
			});
			console.log(res);
			this.showToast();
		},

		//收藏成功弹窗
		showToast(params) {
			uni.showToast({
				icon: "none",
				title: "收藏成功"
			});
		},
		//购买数量
		valChange(e) {
			console.log("当前值为: " + e.value);
		}
	},
	onLoad(optains) {
		this.toshop();
		this.getHotRecommend();
	},
	onShow() {
		this.toshop();
		this.getHotRecommend();
	},
	computed: {
		total() {
			return this.value * this.price;
		},

		getIcon() {
			return path => {
				return "https://cdn.uviewui.com/uview/example/" + path + ".png";
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.hr {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 10vh;
	background-color: #fff;
	width: 90vw;
	padding: 20px 0;
	.left,
	.right {
		margin: 0 20px;
		padding: 0 10px;
	}
	.left::after {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		background-color: #000;
		transform: rotate(45deg) translateY(-5px) translateX(2px);
	}
	.right::before {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		background-color: #000;
		transform: rotate(45deg) translateY(2px) translateX(-5px);
	}
}
.hot_goods {
	width: 90vw;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: #fff;
	.hot_goods_content {
		display: flex;
		flex-direction: column;
		width: 40vw;
		padding: 10px;
		image {
			width: 40vw;
			height: 40vw;
			border-radius: 10px;
		}
		.storeName {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.price {
			color: #e93323;
		}
	}
}
.shopcart {
	display: flex;
	flex-direction: column;
	align-items: center;
}
//顶部背景样式
.header {
	display: flex;
	background-color: rgb(233, 51, 35);
	height: 20vh;
	position: fixed;
	z-index: 99999;
	.slogan {
		display: flex;
		align-items: center;
		padding: 0rpx 20rpx;
		color: #fff;
		.txt {
			padding-left: 10rpx;
		}
	}
}

.empty {
	margin-top: 20vh;
}

//购物车商品样式
.goods {
	display: flex;
	flex-direction: column;
	width: 93%;
	margin-top: 20vh;
	// #ifndef H5
	margin-top: 14vh;
	// #endif
	.caozuo {
		display: flex;
		justify-content: space-between;
		width: 85%;
		// background-color: #fff;
		position: fixed;
		z-index: 99999;
		top: 17vh;
		// #ifndef H5
		top: 17vh;
		// #endif
		left: 6%;
		padding: 0 20rpx;
		line-height: 60rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.manage_btn {
			display: flex;
			justify-content: space-between;
			width: 100rpx;
			height: 40rpx;
			font-size: 12px;
			// border: none !important;
			background-color: #fff;
			text-align: center;
		}

		// uni-button:after {
		// 	border: none
		// 		background-color: #fff;
		// 	color: black
		// }
	}

	.goods_shop {
		display: flex;
		width: 96.7%;
		background-color: #fff;
		.shop_img {
			display: flex;
			padding-left: 15rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.shop_name {
			display: flex;
			flex-direction: column;
			padding-top: 30rpx;
			margin-left: 40rpx;

			.shop_info {
				display: flex;
				flex-direction: column;

				text {
					margin-bottom: 10rpx;
					font-size: 13px;
					width: 390rpx;
				}
			}

			.shop_price_num {
				display: flex;
				.shop_price {
					color: #e93323;
					font-size: 15px;
					font-weight: bold;
					margin-right: 100rpx;
				}
			}
		}
	}
}

//支付行样式
.footer {
	width: 90vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 50rpx;
	padding: 0 24rpx;
	position: fixed;
	bottom: 10vh;
	.asss {
		display: flex;
		align-items: center;
		.total {
			padding: 10px;
			color: red;
		}
		.pay_btn {
			width: 18vw;
			height: 3vh;
			padding: 10px;
			// vertical-align: center;
			// line-height: 50rpx;
			margin-left: 2vw;
		}
	}
	.delete {
		display: flex;
		.shoucang_btn {
			margin-right: 10rpx;
			width: 90rpx;
		}

		.del {
			width: 90rpx;
		}
	}
}
</style>
